<template>
    <div class="container">
        <div>
            <div>
                <el-upload v-model="fileList" ref="uploadRef" list-type="picture" :auto-upload="false"
                    :on-exceed="handleExceed" :limit="1" action="http://localhost:5099/api/files/upload/formimg"
                    name="files" :on-success="handleSuccess">
                    <el-button>添加工作完成图</el-button>
                </el-upload>
            </div>
            <div>
                <el-form label-position="top">
                    <el-form-item label="工序是否全部完成">
                        <el-radio-group v-model="result">
                            <el-radio :value="1" size="small">未完成</el-radio>
                            <el-radio :value="2" size="small">已完成</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="完成详细">
                        <el-input v-model="workDesc" type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="submit">确认</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { UploadUserFile, UploadInstance, UploadRawFile, genFileId, UploadProps, ElMessage } from 'element-plus';
    import { ref } from 'vue';
    import userprocedureRecordApi from '../../api/userprocedureRecordApi';

    const { id } = defineProps({
        id: {
            type: Number,
            required: true
        }
    });

    const emit = defineEmits(["onSave"]);

    const fileList = ref<UploadUserFile[]>([]);

    const result = ref<number>(1);
    const workDesc = ref<string>("");
    const uploadRef = ref<UploadInstance>();

    const submit = () => {
        uploadRef.value!.submit();
    }

    // 选中数量超出限制  
    const handleExceed: UploadProps['onExceed'] = (files) => {
        //保持一个文件
        uploadRef.value!.clearFiles();
        const file = files[0] as UploadRawFile;
        file.uid = genFileId();
        console.log("file", file);

        uploadRef.value!.handleStart(file)
    };

    const handleSuccess: UploadProps['onSuccess'] = (response) => {
        userprocedureRecordApi.add({ result:result.value,workDesc: workDesc.value, UserProcedureId: id, workPict: response.data[0] }).then(res => {
            if (res.code == 1) {
                ElMessage.success({
                    message: "添加成功"
                });
            } else {
                ElMessage.error({
                    message: "添加失败"
                });
            }
            emit("onSave");
        });
    }

</script>

<style scoped>
    .container>div {
        display: flex;
        flex-direction: column;
        gap: 10px 0;
    }
</style>